<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>记录</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/gamerecord.css">
  <script src="./js/rem.js"></script>
  <script src="./js/tool.js"></script>
</head>

<body>
  <header>
    <h1 class="logo">Hello World</h1>
    <div class="user">
      <a href="index.html">首页</a>
    </div>
  </header>
  <div class="nav">
    <a href="game.html">&lt;游戏</a>
  </div>

  <h1 class="title">游戏记录表</h1>
  <table class="record_table">
    <thead>
      <th>
      <td>用户</td>
      <td>得分</td>
      <td>时间</td>
      </th>
    </thead>
    <tbody>

    </tbody>
    <tfoot>
      <tr>
        <td row="3" class="res"></td>
      </tr>
    </tfoot>
  </table>

  <script>
    let d = document;
    let user = d.querySelector("header .user");


    if (!isLogin()) {
      window.location.href = "login.html"
    } else {
      let userC = `
        <span>用户：${sessionStorage.getItem("user_session")}</span>
        <span class="quit">退出</span>
      `;
      user.innerHTML += userC;
      if (!IsPC()) {
        user.querySelector(".quit").addEventListener("touchend", quitToLogin)
      } else {
        user.querySelector(".quit").addEventListener("click", quitToLogin)
      }
    }
    let tbody = document.querySelector(".record_table tbody");
    let res = document.querySelector(".record_table tfoot .res");

    tbody.innerHTML = "";
    select(data => {
      [...data.rows].forEach(it => {
        tbody.innerHTML += `
          <tr>
            <td> ${it.username} </td>
            <td> ${it.score} </td>
            <td> ${it.ctime} </td>
          </tr>
        `
      });
      res.innerText = "一共有" + [...data.rows].length + "条记录"
    })
  </script>
</body>

</html>